$(function () {
    var currentPage = 1;
    var pageSize = 5;
    var picArr = [];

    render();
    // 1. 渲染商品列表
    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            type: 'get',
            data: {
                page: currentPage,
                pageSize: pageSize,
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);
                var strhtml = template('secondTpl', info);
                $('tbody').html(strhtml);

                // 分页
                $("#pagintor").bootstrapPaginator({
                    bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
                    currentPage: currentPage,//当前页
                    totalPages: Math.ceil(info.total / info.size),//总页数
                    onPageClicked: function (_, _, _, page) {
                        //为按钮绑定点击事件 page:当前点击的按钮值
                        currentPage = page;
                        render();
                    }
                });
            }
        })
    }

    // 2. 渲染列表
    $.ajax({
        url: '/category/querySecondCategoryPaging',
        type: 'get',
        data: {
            page: 1,
            pageSize: 1000,
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            var strhtml = template('secondTpl2', info);
            $('.dropdown-menu').html(strhtml);
        }
    })

    // 3.点击下拉列表，显示选中结果
    $('.dropdown-menu').on('click', 'a', function () {
        // console.log(this);
        // 手动添加分类数据
        $('.dropdownText').text($(this).text());
        $('#brandId').val( $(this).data('id') );
        // 手动重置验证样式
        $("#form").data('bootstrapValidator').updateStatus('brandId', 'VALID');
    })

    // 4.上传商品图片
    $("#fileupload").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            // console.log(data);
            //   动态添加图片
            var url = data.result.picAddr;
            // 添加到数组里面
            picArr.unshift(data.result);
            // 动态生成图片
            $('#imgBox').prepend('<img src="'+ url +'" width="100">');

            // 判断图片是否大于3张 删除最后一张图片
            if(picArr.length > 3){
                // 删除数组最后一条数据
                picArr.pop();
                // 删除最后一张图片
                $('#imgBox img:last-of-type').remove();
              }
              // 判断图示数量是否等于三
              if(picArr.length == 3){
                // 手动重置图片样式
                // 清楚样式
                $("#form").data('bootstrapValidator').updateStatus('fileupload', 'VALID');
            }
            // console.log(picArr);

        }
    });

    // 5.表单验证
    $('#form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],
      
        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
      
        //3. 指定校验字段
        fields: {
          //校验用户名，对应name表单的name属性
          brandId: {
            validators: {
              //不能为空
              notEmpty: {
                message: '分类不能为空'
              },
            }
          },

          proName: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品名称不能为空'
              },
              //长度校验
              stringLength: {
                min: 1,
                max: 18,
                message: '商品名称长度必须在1到18之间'
              },
            }
          },

          proDesc: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品描述不能为空'
              },
            }
          },

          num: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品库存不能为空'
              },
              //长度校验
              stringLength: {
                min: 1,
                max: 9999,
                message: '商品库存必须在1到9999之间'
              },
              //正则校验
              regexp: {
                regexp: /^[1-9]\d*$/,
                message: '商品库存只能为数字'
              }
            }
          },

          size: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品尺码不能为空'
              },
              //正则校验
              regexp: {
                regexp: /^\d{2}-\d{2}$/,
                message: '尺码的格式必须是xx-xx数字格式'
              }
            }
          },

          oldPrice: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品原价不能为空'
              },
              //正则校验
              regexp: {
                regexp: /^[1-9]\d*$/,
                message: '商品原价只能为数字'
              }
            }
          },

          price: {
            validators: {
              //不能为空
              notEmpty: {
                message: '商品现价不能为空'
              },
              //正则校验
              regexp: {
                regexp: /^[1-9]\d*$/,
                message: '商品现价只能为数字'
              }
            }
          },

          fileupload: {
            validators: {
              //不能为空
              notEmpty: {
                message: '图片不能为空'
              },
            }
          },


        }
      
      });

    //6.验证成功 提交获取表单数据，提交服务器
    $("#form").on('success.form.bv', function (e) {
        e.preventDefault();

        // 手动拼接图片地址
        //{"picName":"xxx.jpg","picAddr":"/upload/product/xx.jpg"}]' 


        var dataStr = $('#form').serialize();

        dataStr += '&picName1 = ' + picArr[0].picName + '&picAddr1=' + picArr[0].picAddr;
        dataStr += '&picName1 = ' + picArr[1].picName + '&picAddr1=' + picArr[1].picAddr;
        dataStr += '&picName1 = ' + picArr[2].picName + '&picAddr1=' + picArr[2].picAddr;

        console.log(dataStr);
        
        //使用ajax提交逻辑
        $.ajax({
            url: '/product/addProduct',
            type: 'POST',
            data: dataStr,
            dataType: 'json',
            success: function(info){
                console.log(info);
                if(info){
                    $('#addModal').modal('hide');
                    currentPage = 1;
                    render();
                    //重置表单，并且会隐藏所有的错误提示和图标
                    $("#form").data('bootstrapValidator').resetForm(true);
                    // 清楚图片
                    $('#imgBox img').remove();
                    $('.dropdownText').text('请选择二级分类');
                    picArr = [];
                }
            }
        })

    });

    //7.点击取消清除样式
    $('.cancelling').on('click', function(){
        // alert(1122);
        $("#form").data('bootstrapValidator').resetForm(true);
        $('#imgBox img').remove();
        $('.dropdownText').text('请选择二级分类');
        picArr = [];
    })




})